<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <div class="top-left">
        <bar-chart2
          v-if="flag"
          ref="line2"
          width="100%"
          height="100%"
          :y_data="y_data"
        />
      </div>
      <div class="top-right">
        <div class="header">
          <span>强度</span>
          <span>强度</span>
          <span>区间时长</span>
        </div>
        <div class="h-item">
          <span>60%及以下</span>
          <span>放松热身</span>
          <span>{{ this.qd_obj.time[0] }}</span>
        </div>
        <div class="h-item">
          <span>60%-69.9%</span>
          <span>有氧燃脂</span>
          <span>{{ this.qd_obj.time[1] }}</span>
        </div>
        <div class="h-item">
          <span>70%-79.9%</span>
          <span>有氧耐力</span>
          <span>{{ this.qd_obj.time[2] }}</span>
        </div>
        <div class="h-item">
          <span>80%-89.9%</span>
          <span>无氧耐力</span>
          <span>{{ this.qd_obj.time[3] }}</span>
        </div>
        <div class="h-item">
          <span>90%及以上</span>
          <span>极限心率</span>
          <span>{{ this.qd_obj.time[4] }}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import BarChart2 from './BarChart2.vue'
export default {
  name: 'QiangDu',
  components: {
    BarChart2
  },
  props: {
    qd_obj: {
      type: Object
    }
  },
  data() {
    return {
      flag: false,
      y_data: []
    }
  },
  watch: {
    'qd_obj': function(val) {
      console.log(val)
      this.y_data = val.hr
      if (this.flag) {
        this.$refs.line2.initChart()
      }
    }

  },
  mounted() {
    console.log(this.$refs)
    // this.$refs.line2.initChart()
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    padding-left: 25px;
    padding-bottom: 40px;
    .top-left{
      float: left;
      width: calc(100% - 400px);
      height: 352px;
    }
    .top-right{
      width: 350px;
      float: left;
      margin-left: 50px;
      .header{
        margin-top: 20px;
        font-weight: bold;
        overflow: hidden;
        span{
          text-align: left;
          float: left;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          margin-right: 108px;
          &:last-of-type{
            margin-right: 0;
            margin-left: -28px;
          }

        }
      }
      .h-item{
        margin-top: 36px;
        overflow: hidden;
        span{
          padding:0 26px;
          text-align: left;
          float: left;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          border-left: 1px solid rgba(217, 217, 217, 1);
          &:first-of-type{
            position: relative;
            &::after{
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              content: "";
              width: 16px;
              height: 16px;
              background-color: #637ff9;
            }
          }
        }
      }
      .h-item:nth-child(3){
        span:first-of-type{
          &::after{
            background-color: #3aa0ff;
          }
        }
      }
      .h-item:nth-child(4){
        span:first-of-type{
          &::after{
            background-color: #5dd39a;
          }
        }
      }
      .h-item:nth-child(5){
        span:first-of-type{
          &::after{
            background-color: #f8c026;
          }
        }
      }
      .h-item:nth-child(6){
        span:first-of-type{
          &::after{
            background-color: #f5486a;
          }
        }
      }
    }
  }
}

@media screen and (max-width:1400px){
  .zhanshi .top .top-left{
    height: 280px;
  }
  .zhanshi .top .top-right .h-item{
    margin-top: 25px;
  }
}
</style>
